<template>
    <div v-on:mouseenter="onShowMenu" class="miniMenu" :class="{ showMiniMenu : !isMenuShowGetter }">
        <ul>
            <!--<li><i class="el-icon-setting"></i></li>-->
            <li><i class="el-icon-date"></i></li>
            <li><i class="el-icon-menu"></i></li>
            <li><i class="el-icon-document"></i></li>
            <li><i class="el-icon-time"></i></li>
            <li><i class="el-icon-star-on"></i></li>
        </ul>
    </div>
</template>
<script>
    import { mapGetters,mapMutations } from 'vuex';
    export default {
        data() {
            return {
            }
        },
        computed:{
            ...mapGetters([
                'isMenuShowGetter'
            ])
        },
        methods:{
            ...mapMutations([
                'changeMenuShow'
            ]),
            onShowMenu() {
                let isMenuShow = !this.$store.state.menu.isMenuShow;
                this.changeMenuShow(isMenuShow);
            }
        }
    }
</script>
<style lang="stylus">
    .miniMenu
        width 56px
        position absolute
        left -56px
        top 70px
        bottom 0
        background #324157
        transition left .5s ease .5s
        ul>li
            display flex
            float left
            width 56px
            height 56px
            align-items center
            justify-content center
            cursor pointer
            >i
                color #bfcbd9
    &.showMiniMenu
        left 0
</style>
